<template>
  <div class="rage flex-column">
    <!-- 顶部导航栏 -->
    <div class="header-wrapper">
      <custom-navigation :title="title" :titleColor="titleColor"></custom-navigation>
    </div>
    <div class="main flex-column" v-if="journals.length">
      <!-- 上 -->
      <div class="top flex-row">
        <!-- 左边日期组件 -->
        <epsoide :date="currentOne.pubdate" :index="currentOne.index" />
        <!-- 右边转发收藏组件 -->
        <div class="right-wrapper flex-row">
          <!-- 喜欢 -->
          <like-btn :favNum="currentOne.fav_nums" :isLike="isLike" :currentOne="currentOne"></like-btn>
          <!-- 分享 -->
          <div class="img-btn-wrapper">
            <img-btn :imgSrc="imgSrc" :openType="openType" />
          </div>
        </div>
      </div>
      <!-- 中 -->
      <div class="middle">
        <mid-block :data="currentOne" v-if="isFilmORMusic"></mid-block>
        <music :data="currentOne" v-if="isMusic" @handlePlaying="playingHandler"></music>
      </div>
      <!-- 下 -->
      <div class="bottom">
        <bot-block @prev="prevHandler" @next="nextHandler" :title="currentOne.title" :isFirst="isFirst" :isLast="isLast"></bot-block>
      </div>
    </div>
  </div>
</template>

<script>
import CustomNavigation from '@/components/CustomNavigation/CustomNavigation.vue'
import Epsoide from '@/components/Epsoide/Epsoide.vue'
import LikeBtn from '@/components/LikeBtn/LikeBtn.vue'
import ImgBtn from '@/components/ImgBtn/ImgBtn.vue'
import MidBlock from '@/components/MidBlock/MidBlock.vue'
import Music from '@/components/Music/Music.vue'
import BotBlock from '@/components/BotBlock/BotBlock.vue'

const db = wx.cloud.database()
// const _ = db.command
export default {
  name: 'Command',
  data () {
    return {
      title: '知常',
      titleColor: '#000',
      currentOne: {},
      currentIndex: 0,
      journals: [],
      imgSrc: 'https://7465-test-1082be-1257701543.tcb.qcloud.la/icon/share@2x.png?sign=342ec5d7e635ec3e00e7e136a20c0096&t=1538310197',
      openType: 'share',
      isFirst: true,
      isLast: false,
      isLike: false
    }
  },
  computed: {
    isFilmORMusic () {
      return this.currentOne.type === 100 || this.currentOne.type === 300
    },
    isMusic () {
      return this.currentOne.type === 200
    }
  },
  methods: {
    prevHandler () { // 上一期刊
      this.isFirst = false
      this.currentIndex++
      this.currentOne = this.journals[this.currentIndex]
      this._checkLike()
      if (this.currentIndex === this.journals.length - 1) this.isLast = true
    },
    nextHandler () { // 下一期刊
      this.isLast = false
      this.currentIndex--
      this.currentOne = this.journals[this.currentIndex]
      this._checkLike()
      if (this.currentIndex === 0) this.isFirst = true
    },
    playingHandler (isPlaying) { // 播放歌曲时
      this.title = isPlaying ? this.currentOne.title : '词不达意'
    },
    async _checkLike () {
      this.isLike = false
      await db.collection('likes').where({_id: this.currentOne._id})
        .limit(1)
        .get()
        .then(res => {
          if (res.data.length === 1) {
            this.isLike = true
          }
        })
    },
    async _getLatest () {
      await db.collection('rage')
        .orderBy('index', 'desc')
        .limit(5)
        .get()
        .then(res => {
          this.journals = res.data
          this.currentOne = res.data[0]
          this.isFirst = true
          this._checkLike()
        })
    }
  },
  mounted () {
    this._getLatest()
    wx.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff',
      animation: {
        duration: 400,
        timingFunc: 'ease'
      }
    })
  },
  onShareAppMessage () { // 点击分享的回调
    return {
      path: '/pages/Books/main'
    }
  },
  components: {
    CustomNavigation,
    Epsoide,
    LikeBtn,
    ImgBtn,
    MidBlock,
    BotBlock,
    Music
  }
}
</script>

<style lang="stylus" scoped>
  .rage
    height 100%
    .header-wrapper
      height 0
      padding-top 16%
    .main
      flex 1
      width 100%
      .top
        box-sizing border-box
        width 100%
        padding-left 16px
        padding-right 16px
        .right-wrapper
          .img-btn-wrapper
            margin-top 20rpx
            margin-left 40rpx
      .middle
        flex 1
      .bottom
        margin-bottom 36px
</style>

